<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Portfolio</title>
    <script src="js/jquery-1.10.2.min.js"></script>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/icons.css">
    <!--region 导航栏消失-->
    <script>
        $(document).scroll(function () {
            if($(document).scrollTop()===0) {
                $("#header").removeClass("headroom--not-top headroom--unpinned");
                $("#header").addClass("headroom--pinned headroom--top");
            } else {
                $("#header").removeClass("headroom--pinned headroom--top");
                $("#header").addClass("headroom--not-top headroom--unpinned");
            }
            console.log($(document).scrollTop());
        })
    </script>
    <!--endregion-->
</head>
<style>



.col-center-center{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 30%;
    background-color:rgba(0,0,0,0.1);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    padding-bottom: 30px;
}
.biaoti{
    margin-top: 20px;
    margin-bottom: 20px;
}
</style>
<body>
<header id="header" class="headroom headroom--not-bottom headroom--pinned headroom--top" onscroll="myFunction()">
    <div id="header--bg" onscroll="myFunction()">
        <div class="d-flex align-items-center justify-content-end">

            <div id="gnav">
                <nav>
                    <ul>
                        <li><a href="./brand.html"><span>Brand</span></a></li>
                        <li><a href="./portfolio.html"><span>Portfolio</span></a></li>
                        <li><a href="./hometown.html"><span>Hometown</span></a></li>
                        <li><a href="./about.html"><span>About</span></a></li>
                        <li><a href="./contact.html"><span>Contact</span></a></li>
                        <li><a href="./index.html#portfolio"><img src="./images/logo.svg"  width="20%" style="position: relative;top: -10px;left: 20px"/></a></li>
                    </ul>
                </nav>
            </div>

        </div>
    </div>
</header>
<main id="index">
    <div id="main--image" class="main--portfolio active">
        <div class="container">
            <h2 id="main--text">Portfolio</h2>
        </div>
    </div>
    <section id="sec01" style="margin-top: 50px">
        <div class="content-inner-lg-y">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-4 col-md-6" style="max-width: 50%;flex-grow: 1">
                        <img src="images/portfolio/121-100.jpg">
                    </div>
                    <div class="col-lg-3">
                        <h3 class="title--secondary mb20 scrt-to-left">Skill</h3>
                        <p>以下为个人在校期间专业课作业合集</p>
                        <p>画渣合集 慎入--</p>
                    </div>

                </div>
            </div>
        </div>
    </section>
    <section id="sec02">
        <div class="content-inner-lg-y">
                <div class="row justify-content-end">
                    <div class="col-lg-9">
                        <div class="row" >
                            <div class="col-center-center" >
                                    <h4 class="biaoti">First</h4>
                                    <p>设计素描</p>
                                    <p>设计色彩</p>
                                    <p>平面构成</p>
                            </div>
                            <div class="col-center-center">
                                    <h4 class="biaoti">second</h4>
                                    <p>色彩构成</p>
                                    <p>立体构成</p>
                                    <p>摄影基础</p>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 10px">
                            <div class="col-center-center" >
                                <h4 class="biaoti">Third</h4>
                                <p><span>板式设计 | 图形创意</span></p>
                                <p>标志设计 | 装饰图案</p>
                                <p>字体设计 | 书法与纂刻</p>
                            </div>
                            <div class="col-center-center">
                                <h4 class="biaoti">Fourth</h4>
                                <p>动画基础 | 网页设计</p>
                                <p>商业设计 | 印刷工艺</p>
                                <p>水彩画 | 中国画</p>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="row justify-content-center" style="margin-top: 30px">
                    <a href="./works.html" class="btn has-arrow-right">View more</a>
                </div>
            </div>
        </div>
    </section>
</main>
<footer id="footer">
    <div class="container pos-r">
        <div class="ft--body">
            <div class="row justify-content-between">
                <div class="col-lg-5 order-lg-2">
                    <div id="foot-contact" class="row flex-column justify-content-around align-items-start" style="position: relative;top: -200px;padding: 50px">
                        <h3 class="mb40 z-index-99">Contact</h3>
                        <p class="mb30 z-index-99">著名奶茶鉴定家。<br>国家精准扶贫项目重点帮扶对象。</p>
                        <p class="z-index-99"><span>TEL:</span>139 6550 1155</p>
                        <p class="z-index-99"><span>EMAIL:</span>806632876@qq.com</p>
                    </div>
                </div>
                <div class="col-lg-7 order-lg-1 row justify-content-around align-items-start">
                    <img class="col-2" src="./images/logo-foot.svg" alt="Invincible Hair MADA">
                    <div class="d-none d-lg-block col-8">
                        <div class="row mb60">
                            <div class="col-lg-4">
                                <ul class="ft-nav">
                                    <li><a href="/concept/">Brand</a></li>
                                    <li><a href="/About/">About</a></li>
                                </ul>
                            </div>
                            <div class="col-lg-4">
                                <ul class="ft-nav">
                                    <li><a href="/recruit/">Portfolio</a></li>
                                    <li><a href="/contact/">Contact</a></li>
                                </ul>
                            </div>
                            <div class="col-lg-4">
                                <ul class="ft-nav">
                                    <li><a href="/news/">Hometown</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
</body>
</html>